<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>关于文本输入框 change 事件触发时机 | liuz2&#39;s Blog</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.63.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.9576afd3b3c158d98f48ec5df01fec6a.css" rel="stylesheet">
    

    

    
      

    

    

    <meta property="og:title" content="关于文本输入框 change 事件触发时机" />
<meta property="og:description" content="对于文本输入框，change 事件仅在其内容有变化，且失去焦点时触发" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://liuz2.gitee.io/posts/change-event-of-input/" />
<meta property="article:published_time" content="2020-07-21T16:07:47+08:00" />
<meta property="article:modified_time" content="2020-07-21T16:07:47+08:00" />
<meta itemprop="name" content="关于文本输入框 change 事件触发时机">
<meta itemprop="description" content="对于文本输入框，change 事件仅在其内容有变化，且失去焦点时触发">
<meta itemprop="datePublished" content="2020-07-21T16:07:47&#43;08:00" />
<meta itemprop="dateModified" content="2020-07-21T16:07:47&#43;08:00" />
<meta itemprop="wordCount" content="77">



<meta itemprop="keywords" content="javascript,dom," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="关于文本输入框 change 事件触发时机"/>
<meta name="twitter:description" content="对于文本输入框，change 事件仅在其内容有变化，且失去焦点时触发"/>

	
  </head>

  <body class="ma0 avenir bg-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        liuz2&#39;s Blog
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/links/" title="Links page">
              Links
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/timeline/" title="Timeline page">
              Timeline
            </a>
          </li>
          
        </ul>
      
      















    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <h1 class="f3 athelas mt3 mb1">关于文本输入框 change 事件触发时机</h1>
      
      
      <time class="f6 mv1 dib tracked" datetime="2020-07-21T16:07:47&#43;08:00">July 21, 2020</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy sans-serif f5 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><p>对于文本输入框 <code>&lt;input&gt;</code> 或 <code>&lt;textarea&gt;</code> 来说，常用的事件有 <code>input</code> 和 <code>change</code> 等。两种事件的触发时机不同。</p>
<p><code>input</code> 事件会在每次输入文本后即时触发，而 <code>change</code> 事件会在文本框内容发生变化，并且该<strong>文本框失焦时</strong>触发。</p>
<p>为了验证两者的触发时机，可以编写如下 HTML 文件：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;myInput&#34;</span> <span style="color:#a6e22e">placeholder</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Input Something&#34;</span> /&gt;

&lt;<span style="color:#f92672">script</span>&gt;
    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">$el</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;#myInput&#39;</span>);
    <span style="color:#a6e22e">$el</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;input&#39;</span>, <span style="color:#a6e22e">onInput</span>);
    <span style="color:#a6e22e">$el</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;change&#39;</span>, <span style="color:#a6e22e">onChange</span>);

    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onInput</span>(<span style="color:#a6e22e">e</span>) {
        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;input&#39;</span>, <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">value</span>);
    }

    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onChange</span>(<span style="color:#a6e22e">e</span>) {
        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;change&#39;</span>, <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">value</span>);
    }
&lt;/<span style="color:#f92672">script</span>&gt;
</code></pre></div><p>关于 <code>change</code> 事件的具体触发时机，<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event" title="HTMLElement:change event">MDN</a> 上有专门介绍：</p>
<p>根据受影响的 HTML 元素类型和用户的交互方式不同，<code>change</code> 事件在不同的时机触发：</p>
<ol>
<li>当 <code>&lt;input type=&quot;radio&quot;&gt;</code> 和 <code>&lt;input type=&quot;checkbox&quot;&gt;</code> 被选中（<code>:checked</code>）时（通过鼠标点击或者键盘）</li>
<li>当用户明确提交修改时（比如，通过鼠标选中 <code>&lt;select&gt;</code> 的下拉选项时，通过日期选择框 <code>&lt;input type=&quot;date&quot;&gt;</code> 选中日期时，或通过文本选择框 <code>&lt;input type=&quot;file&quot;&gt;</code> 选中文件时）</li>
<li>当元素内容有改动后，失去焦点且尚未提交时（比如，当编辑 <code>&lt;textarea&gt;</code> 或 <code>&lt;input type=&quot;text&quot;&gt;</code> 内容后）</li>
</ol>
<h2 id="参考文档">参考文档</h2>
<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event" title="HTMLElement:change event">HTMLElement:change event</a>, MDN</li>
</ol>
<a href="https://gitee.com/liuz2/liuz2/blob/master/content/posts/change-event-of-input.md#tree_comm_title" class="no-underline db b--black pa2 tc bg-black-90" style="color:#eee;">进入留言</a><ul class="pa0">
  
   <li class="list dib">
     <a href="/tags/javascript" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">javascript</a>
   </li>
  
   <li class="list dib">
     <a href="/tags/dom" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">dom</a>
   </li>
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l">




</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="https://liuz2.gitee.io/" >
    &copy;  liuz2's Blog 2022 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
